<template>
  <div class="dashboard-page">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>面经后台</el-breadcrumb-item>
      <el-breadcrumb-item>数据看板</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 一行24份 -->
    <el-row :gutter="20">
      <!-- :span占6份 -->
      <el-col :span="6">
        <el-card style="height :140px" shadow="never">
          <i class="el-icon-user"></i>
          <h5 class="tit">活跃用户</h5>
          <h2 class="num">802</h2>
          <p class="tag"><i>↑ 5.23%</i> 最近一个月 </p>
        </el-card>
        <el-card style="height :140px" shadow="never">
          <i class="el-icon-tickets"></i>
          <h5 class="tit">平均访问量</h5>
          <h2 class="num">1298</h2>
          <p class="tag"><i class="red">↑ 8.56%</i> 截止最近一周 </p>
        </el-card>
        <el-card class="row" style="height :180px" shadow="never">
          <h4>Enhance your Campaign for better outreach →</h4>
          <img src="@/assets/img.svg" alt="" />
        </el-card>
      </el-col>
      <el-col :span="18">
        <el-card style="height: 505px" shadow="never">
          <div ref="chartbox" class="chart-box" style="height: 500px"></div>
        </el-card>
      </el-col>
      <!-- 第二行，每一份占8份 -->
      <el-col :span="8">
        <el-card style="height: 420px" shadow="never">
          <h4>性别分布情况</h4>
          <img style="margin-top: 60px" src="@/assets/chart-03.png" alt="" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="height: 420px" shadow="never">
          <h4>浏览访问情况</h4>
          <img src="@/assets/chart-01.svg" alt="" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card style="height: 420px" shadow="never">
          <h4>设备系统访问情况</h4>
          <img style="margin-top: 20px" src="@/assets/chart-02.svg" alt="" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const da = [['体育', 116], ['医疗', 129],
  ['科技', 135], ['电商', 86], ['土木', 73],
  ['金融', 85], ['其他', 273]]
const dateList = da.map(function (item) {
  return item[0]
})
const valueList = da.map(function (item) {
  return item[1]
})
export default {
  name: 'dashboard-page',
  data () {
    return {
      loading: true,
      chartInstance: null
    }
  },
  mounted () {
    this.initEcharts()
  },
  created () {},
  methods: {
    dateList (da) {
      da.map(function (item) {
        return item[0]
      })
    },
    valueList (da) {
      da.map(function (item) {
        return item[1]
      })
    },
    initEcharts () {
      this.chartInstance = this.$echarts.init(this.$refs.chartbox)
      const option = {
        // visualMap: [
        //   {
        //     show: false,
        //     type: 'continuous',
        //     seriesIndex: 0,
        //     min: 0,
        //     max: 400
        //   },
        //   {
        //     show: false,
        //     type: 'continuous',
        //     seriesIndex: 1,
        //     dimension: 0,
        //     min: 0,
        //     max: dateList.length - 1
        //   }
        // ],
        title: [
          {
            left: 'left',
            text: '职业方向热度'
          }
        ],
        tooltip: {
          trigger: 'axis'
        },
        xAxis: [

          {
            data: dateList,
            gridIndex: 0
          }
        ],
        yAxis: [
          {
            gridIndex: 0
          }
        ],
        grid: [
          {
            top: '10%'
          }
        ],
        series: [
          {
            type: 'bar',
            showSymbol: false,
            data: valueList
          }

        ]
      }
      this.chartInstance.setOption(option)
    }

  }
}

</script>

<style lang="scss" scoped>
  .dashboard-page {
    .el-breadcrumb {
      margin-top: 10px;
      margin-bottom: 25px;
    }
    .el-card {
      margin-bottom: 20px;
      position: relative;
      &.row {
        h4 {
          width: 40%;
          float: left;
          font-size: 18px;
          margin-left: 5%;
        }
        img {
          width: 40%;
          float: left;
          margin-left: 10%;
          margin-top: 30%;
        }
      }
      [class^="el-icon"] {
        font-size: 30px;
        color: #ccc;
        position: absolute;
        right: 25px;
        top: 30px;
        font-weight: bold;
      }
      .tit {
        color: #6c757d;
        font-size: 14px;
        margin: 6px 0;
      }
      .num {
        color: #6c757d;
        font-size: 30px;
        margin: 6px 0;
      }
      .tag {
        color: #999;
        margin: 0;
        font-size: 14px;
        > i {
          font-style: normal;
          margin-right: 10px;
          color: rgb(10, 207, 151);
          &.red {
            color: #fa5c7c;
          }
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
      h4 {
        margin: 0;
        padding-bottom: 20px;
        color: #6c757d;
      }
    }
  }
</style>
